<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>map</title>
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"></script> -->
		<script src="./js/vue.js"></script>
		<script src="./js/echarts.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.css">
		<script src="https://unpkg.com/axios/dist/axios.js"></script>
	</head>
	<body>
		<div id="app">
			<span>当前选中了: {{ cityName || '-' }}</span>
			<ve-map :data="mapData" width="100%" height="650px" :settings="mapSettings" :events="mapEvents" :extend="mapExtend"></ve-map>
		</div>
	</body>

	<script>
		new Vue({
			el: "#app",
			data() {
				this.mapSettings = {
					roam: true, //是否开启鼠标缩放和平移漫游
					positionJsonLink: "https://geo.datav.aliyun.com/areas_v2/bound/geojson?code=100000_full", //地图数据源
					mapURLProfix: "https://geo.datav.aliyun.com/areas_v2/bound", //位置请求的 URL 前缀，指定了之后就要有地图数据源的指定，否则不显示地图
					// position: "province/henan", 
					aspectScale: 0.75,
					beforeRegisterMap (json) {
					  return json
					}
				};
				this.mapEvents = {
					click: (v) => {
						// console.log(v.features)
						this.cityName = v.name;
						this.getData();
						this.mapSettings.positionJsonLink = "https://geo.datav.aliyun.com/areas_v2/bound/geojson?code=410000_full";
						// this.mapSettings.mapURLProfix = './js/map/';
						// this.mapSettings.position = 'province/henan';
					}
				}
				this.mapExtend = {
					series: {
						 label: {
							 show: true,
							 color:"#000"
						 },
						itemStyle:{
							  areaColor:"#aaffff",
							  borderColor:"#d53"
						 },
					},
					// positionJsonLink:'https://geo.datav.aliyun.com/areas_v2/bound/geojson?code=100000_full'
				}
				return {
					cityName: '',
					mapURLProfix: 'https://geo.datav.aliyun.com/areas_v2/bound/geojson?code=',
					myAdcode: '100000',
					tailUrl:'_full',
					mapData: {
						columns: ['name', 'count'], //这里至少要有两个数据
						rows: []
					}
				}
			},
			mounted() {
				// this.getData();
			},
			methods: {
				/**
				 * 在china中获取每个省份对应的adCode
				 * */
				getData: function() {
					var that = this;
					var adList = [];
					// that.mapURLProfix + '100000' + that.tailUrl
					axios.get('https://geo.datav.aliyun.com/areas_v2/bound/geojson?code=100000_full')
						.then(
							function(response) {
								// console.log(response.data.features);
								var data = response.data.features;
								for (var i = 0; i < data.length; i++) {
									var obj = {
										'name': '',
										'adcode': ''
									};
									obj.name = data[i].properties.name;
									obj.adcode = data[i].properties.adcode;
									adList[i] = obj;
								}
								// 共34个省级行政区域
								// console.log(adList);
								console.log('click cityName: ' + that.cityName);
								for (var i = 0; i < adList.length; i++) {
									if (adList[i].name == that.cityName) {
										console.log("adcode: " + adList[i].adcode);
										that.myAdcode = adList[i].adcode;
										// console.log("myAdcode:" + that.myAdcode);
									}
								}
							}).catch(function(err) {
							console.log(err)
						});
				}
			},
		})
	</script>
</html>
